<template>
  <el-container>
    <el-aside width="350px" class="content-left-list">
      <div class="ps-panel nav-left-menu" style="height: calc(100% - 30px)">
        <div class="ps-panel-head">
          <span class="ps-panel-head-title">{{
            $route.query.type != "0" ? "文件" : "新闻"
          }}</span>
          <button
            size="small"
            type="button"
            class="el-icon-upload menuTensile ps-right"
            v-if="$route.query.type != '0'"
            v-on:click="
              uploadVisible = true;
              fileList = [];
            "
            title="上传"
          ></button>
        </div>
        <div class="ps-panel-body" v-show="webUrls.length == 0">
          <el-empty :image-size="200"></el-empty>
        </div>
        <div
          v-show="webUrls.length > 0"
          class="ps-panel-body"
          v-loading="isloading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
        >
          <el-table
            ref="traggerTable"
            :data="webUrls"
            style="width: 100%"
            :show-header="false"
            highlight-current-row
            @row-click="handlerRow"
          >
            <el-table-column type="index" align="center"> </el-table-column>
            <el-table-column prop="filename" label="文件名" align="center">
            </el-table-column>
          </el-table>
          <!-- old start -->
          <!-- <el-menu
            :default-active="active"
            ref="webMenu"
            class="el-menu-vertical"
            style="width: 100%"
            @select="selectedMenu"
          >
            <el-menu-item
              v-for="(item, i) in webUrls"
              :key="i"
              :index="i.toString()"
              >{{ item.filename }}</el-menu-item
            >
          </el-menu> -->
          <!-- old end -->
        </div>
      </div>
      <div class="pagination">
        <el-pagination
          small
          :page-size="paginations.pageSize"
          :layout="paginations.layout"
          :total="paginations.total"
          :current-page="paginations.pageIndex"
          :pager-count="5"
          @current-change="jump"
          style="text-align: center"
        >
        </el-pagination>
      </div>
    </el-aside>
    <el-main
      class="content-main"
      v-loading="isMainloading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
    >
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane
          :disabled="
            webData.auther && $route.query.type !== 'EXCEL' ? false : true
          "
          label="文本"
          name="first"
        ></el-tab-pane>
        <el-tab-pane
          :disabled="
            webData.auther || $route.query.type == 'EXCEL' ? false : true
          "
          label="数据"
          name="second"
        ></el-tab-pane>
      </el-tabs>
      <div v-if="activeName == 'first'" class="txt_content">
        <p class="title" v-html="webData.title"></p>

        <div class="auther" v-html="webData.auther"></div>

        <!-- <div class="content" style="width: 100%" v-text="webData.content"></div> -->
        <div
          class="content"
          style="
            width: 100%;
            white-space: pre-line;
            height: calc(100% - 100px);
            overflow: auto;
          "
          v-html="webData.content"
        ></div>

        <div
          class="analyze_top_right"
          v-show="webData.isAnalyze ? false : true && this.webData.title"
        >
          <router-link
            :to="
              '/connect/imageDetail?type=' + 'unstructure' + '&id=' + webData.id
            "
            target="_self"
            ><i class="iconfont icon-analyze"></i>分析</router-link
          >
        </div>
      </div>
      <div
        v-show="activeName == 'second'"
        class="txt_content"
        style="position: relative"
      >
        <div class="upstars">
          <div class="upstars_bottom">
            <el-form
              ref="form"
              :model="form"
              :rules="form.rules"
              status-icon
              size="small"
              label-width="100px"
            >
              <fieldset>
                <legend style="font-size: 18px">基本信息</legend>
                <el-form-item label="源表：" prop="source_name">
                  <el-input v-model="form.source_name"></el-input>
                </el-form-item>
                <el-form-item label="数据源：" prop="source_id">
                  <el-select
                    v-model="form.source_id"
                    style="width: 100%"
                    placeholder="请选择"
                    @change="selectedSource"
                  >
                    <el-option
                      v-for="item of sources"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="目标类型：">
                  <el-select
                    v-model="targetType"
                    placeholder="请选择"
                    @change="selectType"
                  >
                    <el-option
                      v-for="item in TypePoint"
                      :key="item.id"
                      :label="item.label"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="目标标签：" prop="target_label_name">
                  <el-treeselect
                    style="width: 100%"
                    v-model="form.target_label_name"
                    placeholder="请输入搜索内容"
                    :data="labels"
                    :props="{
                      label: 'label_name',
                      value: 'id',
                      children: 'children',
                    }"
                    :clickParent="true"
                    :search="false"
                    @nodeClick="
                      (data) => {
                        selectedLabelName(data);
                      }
                    "
                  >
                  </el-treeselect>
                </el-form-item>
                <el-form-item label="关系模型：" v-if="targetType !== 1">
                  <el-select
                    v-model="form.command"
                    @change="selectedModel"
                    placeholder="请先选择目标标签"
                    clearable
                  >
                    <el-option
                      v-for="(item, i) in relationModel"
                      :key="item.id"
                      :label="
                        item.start_node_label_name +
                        '->' +
                        item.end_node_label_name
                      "
                      :value="i"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </fieldset>
              <fieldset style="height: 57%">
                <legend style="font-size: 18px">字段信息</legend>
                <el-scrollbar style="width: 100%; height: 90%">
                  <el-table
                    :data="form.fields"
                    style="width: 80%; margin: 0 auto"
                    height="230"
                    highlight-current-row
                    stripe
                    size="mini"
                    v-if="targetType == 1"
                  >
                    <el-table-column
                      label="序号"
                      type="index"
                    ></el-table-column>
                    <el-table-column
                      prop="sourceFieldName"
                      label="源字段"
                      width="180"
                      align="center"
                    ></el-table-column>
                    <el-table-column label="目标属性" align="center">
                      <template slot-scope="scope">
                        <el-form-item
                          label-width="0"
                          :prop="'fields.' + scope.$index + '.target_attr'"
                          :rules="
                            scope.row.is_conv
                              ? {
                                  required: true,
                                  message: '不能为空',
                                  trigger: 'blur',
                                }
                              : {}
                          "
                          style="margin: 0"
                        >
                          <!-- 选择模型属性 start -->
                          <el-select
                            v-model="temporaryVal[scope.$index]['target_attr']"
                            placeholder="请选择"
                            @change="
                              changePointlabel(
                                scope.$index,
                                temporaryVal[scope.$index]['target_attr']
                              )
                            "
                          >
                            <el-option
                              v-for="(item, index) in options"
                              :key="index"
                              :label="item.name"
                              :value="index"
                            >
                            </el-option>
                          </el-select>
                          <!-- 选择模型属性 end -->
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="转换类型"
                      width="180"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <el-form-item
                          label-width="0"
                          :rules="
                            scope.row.is_conv
                              ? {
                                  required: true,
                                  message: '不能为空',
                                  trigger: 'blur',
                                }
                              : {}
                          "
                          style="margin: 0"
                        >
                          <!-- 选择模型属性 start -->
                          <el-select
                            v-model="
                              temporaryVal[scope.$index]['target_transformType']
                            "
                            placeholder="请选择"
                            @change="
                              changeTransformType(
                                scope.$index,
                                temporaryVal[scope.$index][
                                  'target_transformType'
                                ]
                              )
                            "
                          >
                            <el-option
                              v-for="(item, i) in transformTypelist"
                              :key="i"
                              :label="item.type_description"
                              :value="item.type_description"
                            >
                            </el-option>
                          </el-select>
                          <!-- 选择模型属性 end -->
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column label="转换项" width="180" align="center">
                      <template slot-scope="scope">
                        <el-form-item
                          label-width="0"
                          :prop="'fields.' + scope.$index + '.target_attr'"
                          :rules="
                            scope.row.is_conv
                              ? {
                                  required: true,
                                  message: '不能为空',
                                  trigger: 'blur',
                                }
                              : {}
                          "
                          style="margin: 0"
                        >
                          <!-- 选择模型属性 start -->
                          <el-select
                            v-model="
                              temporaryVal[scope.$index]['transformFunction']
                            "
                            placeholder="请选择"
                            @change="
                              changeTransformFunction(
                                scope.$index,
                                temporaryVal[scope.$index]['transformFunction']
                              )
                            "
                          >
                            <el-option
                              v-for="(a, s) in transformFunctionlist"
                              :key="s"
                              :label="a.name"
                              :value="a.name"
                            >
                            </el-option>
                          </el-select>
                          <!-- 选择模型属性 end -->
                        </el-form-item>
                      </template>
                    </el-table-column>
                  </el-table>
                  <transition name="el-fade-in-linear">
                    <div
                      style="width: 100%; height: 230px; overflow: auto"
                      v-if="targetType !== 1"
                    >
                      <div class="bottom_content">
                        <div class="model_top">
                          <p v-for="(item, t) in conditionNode" :key="t">
                            <span>{{ item.title }}</span>
                            <el-input
                              v-model="item.value"
                              style="width: 50%"
                              placeholder="请输入内容"
                              readonly
                            ></el-input>
                            <!-- <el-select
                              v-model="item.index"
                              clearable
                              placeholder="请先选择目标标签"
                              @change="
                                (value) => {
                                  selectedNode(value, t);
                                }
                              "
                            >
                              <el-option
                                v-for="(a, i) in sourcelist"
                                :key="i"
                                :label="a.relationship_label_name"
                                :value="i"
                              >
                              </el-option>
                            </el-select> -->
                          </p>
                        </div>
                        <div class="model_content">
                          <div
                            class="content_block"
                            v-for="(a, n) in Nodedirection"
                            :key="n"
                          >
                            <el-table
                              :data="a"
                              height="100"
                              highlight-current-row
                              stripe
                              size="mini"
                            >
                              <el-table-column
                                label="序号"
                                type="index"
                              ></el-table-column>
                              <el-table-column label="源字段" align="center">
                                <template slot-scope="scope">
                                  <el-form-item
                                    label-width="0"
                                    :rules="{
                                      required: true,
                                      message: '不能为空',
                                      trigger: 'blur',
                                    }"
                                    style="margin: 0"
                                  >
                                    <!-- 选择模型属性 start -->
                                    <el-select
                                      v-model="scope.row.field_name_in_table"
                                      placeholder="请选择"
                                    >
                                      <el-option
                                        v-for="(s, p) in sourceBity"
                                        :key="p"
                                        :label="s"
                                        :value="s"
                                      >
                                      </el-option>
                                    </el-select>
                                    <!-- 选择模型属性 end -->
                                  </el-form-item>
                                </template>
                              </el-table-column>
                              <el-table-column label="目标属性" align="center">
                                <template slot-scope="scope">
                                  <el-form-item
                                    label-width="0"
                                    :rules="{
                                      required: true,
                                      message: '不能为空',
                                      trigger: 'blur',
                                    }"
                                    style="margin: 0"
                                  >
                                    <!-- 选择模型属性或者关系树 start -->
                                    <el-select
                                      v-model="scope.row.field_name_in_model"
                                      placeholder="请选择"
                                      @change="
                                        (value) => {
                                          selectedAttr(value, n);
                                        }
                                      "
                                    >
                                      <el-option
                                        v-for="(t, u) in conditionNode[n].list"
                                        :key="u"
                                        :label="t.name"
                                        :value="t.name"
                                      >
                                      </el-option>
                                    </el-select>
                                    <!-- 选择模型属性 end -->
                                  </el-form-item>
                                </template>
                              </el-table-column>
                            </el-table>
                          </div>
                        </div>
                      </div>
                    </div>
                  </transition>
                </el-scrollbar>
              </fieldset>
            </el-form>
          </div>
          <div class="upstars_bottom_btn">
            <div class="upstars_bottom_state">
              <!-- <el-descriptions v-if="isResult">
                <el-descriptions-item label="导入成功的条数">{{
            ImportTaskinfo.importCount
          }}</el-descriptions-item>
                <el-descriptions-item label="导入状态" :labelStyle="{ 'vertical-align': 'middle' }">
                  <el-tag :color="ImportTaskinfo.color" effect="dark" size="small">
                    {{ ImportTaskinfo.describe }}
                  </el-tag>
                  <div class="resultloading" v-loading="isLongGo"></div>
                  <el-button type="primary" :loading="true" size="small" style="margin-left:10px;"></el-button>
                </el-descriptions-item>
                <el-descriptions-item label="进度时间">{{
            ImportTaskinfo.nowDate
          }}</el-descriptions-item>
              </el-descriptions> -->
            </div>
            <el-button
              :disabled="sources.length > 0 ? false : true"
              type="primary"
              @click="OutSetInsert"
              >导 入
            </el-button>
          </div>
        </div>
        <!-- <div
          class="downstars"
          :style="{ 'z-index': result_status ? '2000' : '100' }"
        >
          <transition
            name="custom-classes-transition"
            enter-active-class="animate__animated animate__backInUp"
            leave-active-class="animate__animated animate__backOutDown"
          >
            <div
              class="downstars_content"
              v-show="result_status"
              :style="{
                marginTop: result_status ? '0' : '-600px',
                width: '500px',
                height: '420px',
                padding: '10px',
              }"
            >
              <commonList
                :Common_tablelist="Common_tablelist"
                style="width: 100%; height: 100%"
              ></commonList>
            </div>
          </transition>
        </div> -->
      </div>
    </el-main>

    <el-dialog title="上传文件" :visible.sync="uploadVisible" width="450px">
      <el-upload
        class="upload-demo"
        ref="upload"
        multiple
        action="#"
        :file-list="fileList"
        :headers="{ token: token }"
        :accept="'.' + TypeMode"
        :on-success="uploadSuccess"
        :http-request="changeheader"
        :on-change="uploadChange"
        :auto-upload="false"
      >
        <el-button slot="trigger" size="small" type="primary">选取</el-button>
        <el-button
          style="margin-left: 10px"
          size="small"
          type="success"
          @click="submitUpload"
          >上传</el-button
        >
        <div slot="tip" class="el-upload__tip">只能上传{{ TypeMode }}文件</div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="uploadVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
import Spreadsheet from "x-data-spreadsheet";
import zhCN from "x-data-spreadsheet/src/locale/zh-cn";
Spreadsheet.locale("zh-cn", zhCN);
import commonList from "../../common/tableComponents.vue";
import elTreeselect from "el-tree-select";
import {
  loadingTime
} from "./index";
export default {
  name: "images",
  components: {
    commonList,
    elTreeselect,
  },
  data: function () {
    return {
      active: "",
      paginations: {
        pageIndex: 1, // 当前位于哪页
        pageSize: 20, // 页显示多少条
        total: 0, // 总数
        layout: "total, prev, pager, next", // 翻页属性
      },
      webUrls: [],
      webData: {},
      previewVisible: false,
      uploadVisible: false,
      fileList: [],
      token: sessionStorage.token,
      TypeMode: "",
      TypenowList: [],
      TypeNum: 1,
      activeName: "first", //标签页
      xs: null, //xls 对象
      currentRowFile: {}, //点击文件数据
      Common_tablelist: {},
      form: {
        visible: false,
        rules: {
          source_name: [{
            required: true,
            message: "不能为空"
          }],
          source_id: [{
            required: true,
            message: "不能为空"
          }],
          target_label_name: [{
            required: true,
            message: "不能为空"
          }],
          sql: [{
            required: true,
            message: "不能为空"
          }],
        },
        id: 0,
        source_name: "",
        source_id: null,
        target_label_id: 0,
        target_label_name: "",
        sql: "",
        fields: [],
        truefields: {},
        command: ''
      },
      targetType: 1,
      TypePoint: [{
        label: "模型",
        id: 1,
      },
      {
        label: "关系",
        id: 2,
      },
      ], //目标类型
      sourceBity: [], //源字段数组
      AttrDoublelist: [], //双 目标属性数组
      sources: [],
      drawer: false,
      labels: [],
      result_status: false, //结果是否弹出
      tableAllData: [], //表格数据总
      options: [], //属性列表
      transformTypelist: [], //转换类型
      transformFunctionlist: [], //转换项
      isloading: false, //左侧列表加载
      isMainloading: false,//右侧内容加载
      relationModel: [],//关系模型数组
      sourcelist: [],//源节点标签数组
      sourceData: {},//源节点标签信息
      targetData: {},//目标节点标签信息
      targetlist: [],//目标节点标签数组
      conditionNode: [{
        id: 0,
        title: "源节点",
        type: "start",
        value: "",
        index: "",
        list: [],
        labelName: "startNodeData",
      },
      {
        id: 1,
        title: "目标节点",
        type: "End",
        value: "",
        index: "",
        list: [],
        labelName: "endNodeData",
      },
      ],
      Nodedirection: [],
      isResult: false, //结果是否展示
      ImportTaskinfo: {}, //导入任务结果信息
      ResultJudge: [{
        id: 0,
        color: "#409eff", //标签的类型
        describe: "初始状态、未激活",
        en: "INIT",
      },
      {
        id: 1,
        color: "#67c23a", //标签的类型
        describe: "已激活",
        en: "WAIT_RUN",
      },
      {
        id: 2,
        color: "#909399", //标签的类型
        describe: "待运行",
        en: "INIT",
      },
      {
        id: 3,
        color: "#E6E6FA", //标签的类型
        describe: "运行中",
        en: "RUNNING",
      },
      {
        id: 4,
        color: "#48D1CC", //标签的类型
        describe: "已完成",
        en: "FINISHED",
      },
      {
        id: 5,
        color: "info", //标签的类型
        describe: "待停止",
        en: "WAIT_STOP",
      },
      {
        id: 6,
        color: "#00BFFF", //标签的类型
        describe: "停止中",
        en: "STOPPING",
      },
      {
        id: 7,
        color: "#808080", //标签的类型
        describe: "已停止",
        en: "STOPPED",
      },
      {
        id: 8,
        color: "#FF1493", //标签的类型
        describe: "无人接管",
        en: "UN_MANAGED",
      },
      {
        id: -1,
        color: "#FF0000", //标签的类型
        describe: "异常",
        en: "ERROR",
      },
      ],
      isLongGo: false,

      temporaryVal: [],
      dataTypelist: ['unknown', 'int', 'long', 'string', 'double', 'datetime', 'boolean'],
      //定时器
      timer: '',
    };
  },
  methods: {
    /* 基本运行 start */
    //清空并初始化
    clearifyInit () {
      this.ImportTaskinfo = {};
      this.isResult = false;
      this.$refs["form"].resetFields(); //重置表单
      this.result_status = false;
      this.tableAllData = []; //表格数据总
      this.options = []; //属性列表
      this.webData = {}; //文本清空
      this.form.fields = []; //目标属性
      this.form.truefields = {}; //真实清空
      this.form.source_name = "";
      this.form.source_id = null;
      this.form.target_label_id = 0;
      this.form.target_label_name = "";
      this.form.sql = "";
    },
    //修改类型
    modification () {
      this.activeName = "first";
      if (this.$route.query.type == "word") {
        this.TypeMode = "doc,.docx";
        this.TypenowList = ['doc', 'docx'];
        this.TypeNum = 3;
      } else if (this.$route.query.type == "PPT") {
        this.TypeMode = "ppt,.pptx";
        this.TypenowList = ['ppt', 'pptx'];
        this.TypeNum = 4;
      } else if (this.$route.query.type == "WPS") {
        this.TypeMode = "wps,.dps,.et";
        this.TypenowList = ['wps', 'dps', 'et'];
        this.TypeNum = 5;
      }
      else if (this.$route.query.type == "csv") {
        this.TypeMode = "csv";
        this.TypenowList = ['csv'];
        this.TypeNum = 15;
        this.activeName = "second";
      } else if (this.$route.query.type == "EXCEL") {
        this.TypeMode = "xls,.xlsx";
        this.TypenowList = ['xls', 'xlsx'];
        this.TypeNum = 6;
        this.activeName = "second";
      } else if (this.$route.query.type == "TXT") {
        this.TypeMode = "txt";
        this.TypenowList = ['txt'];
        this.TypeNum = 7;
      } else if (this.$route.query.type == "PDF") {
        this.TypeMode = "pdf";
        this.TypenowList = ['pdf'];
        this.TypeNum = 8;
      } else if (this.$route.query.type == "XML") {
        this.TypeMode = "XML";
        this.TypenowList = ['xml'];
        this.TypeNum = 9;
      } else if (this.$route.query.type == "JSON") {
        this.TypeMode = "json";
        this.TypenowList = ['json'];
        this.TypeNum = 10;
      } else if (this.$route.query.type == "7z") {
        this.TypeMode = "7z";
        this.TypenowList = ['7z'];
        this.TypeNum = 11;
      } else if (this.$route.query.type == "zip") {
        this.TypeMode = "zip";
        this.TypenowList = ['zip'];
        this.TypeNum = 12;
      } else if (this.$route.query.type == "py") {
        this.TypeMode = "py";
        this.TypenowList = ['py'];
        this.TypeNum = 13;
      } else if (this.$route.query.type == "rtf") {
        this.TypeMode = "rtf";
        this.TypenowList = ['rtf'];
        this.TypeNum = 14;
      }
    },
    //初始化
    init () {
      this.jump(1);
      if (this.activeName == "second") {
        this.getLabels();
      }
    },
    //初请求列表
    jump (i) {
      this.webUrls = [];
      // let pageSize = i;
      let type = this.TypenowList;
      if (i === undefined) {
        i = this.paginations.pageIndex;
      } else {
        this.paginations.pageIndex = i;
      }
      this.isloading = true;
      this.$store.dispatch("ajax", {
        // url: `/zonghe/api/uploadfile?sort=id,desc&paged=false`,
        url: `/zonghe/api/upload_file?sort=id,desc&paged=false&file_type.in=${type}`,
        method: "get",
        data: {
          page: i,
          size: this.paginations.pageSize,
        },
        succeed: (res) => {
          // console.log(res);
          // console.log(this.TypeMode);
          if (res.length == 0) {
            return;
          }
          res.map((ap) => {
            // if (ap.fileType.length > 0) {
            if (ap.file_type.length > 0) {
              this.webUrls.push(ap);
            }
          });
          // console.log(this.webUrls);
          this.isloading = false;
          this.paginations.total = this.webUrls.length;
          let detailFrom = {};
          // let detailFrom = this.$store.state.unstructureData;
          // console.log(detailFrom);
          //如果没有保存选择就默认展开第一个
          if (this.webUrls.length == 0) {
            return;
          }
          if (JSON.stringify(detailFrom) == "{}") {
            this.preview(this.webUrls[0], 0);
            this.$refs["traggerTable"].setCurrentRow(this.webUrls[0]);
            return;
          }
        },
      });
    },
    /* 基本运行 end */
    /* 事件触发 start */
    //文件列表行点击事件
    handlerRow (row) {
      this.clearifyInit();
      this.modification();
      this.preview(row);
    },
    //文字或者表格预览
    preview (row) {
      // preview(row, index) {
      console.log(row);
      console.log(this.activeName);
      this.currentRowFile = row;
      if (this.activeName == "first") {
        if (this.$route.query.type == "EXCEL") {
          return;
        }
        this.$store.dispatch("ajax", {
          url: `/zonghe/api/office/file/content/_get`,
          method: "post",
          data: {
            filepath: row.filepath_server,
          },
          succeed: (res) => {
            console.log(res);
            this.webData = res;
            this.webData.title = row.filename;
            this.webData.isAnalyze = row.is_analyze;
            this.webData.id = row.id;
            this.webData.auther = row.created_time + "来源： " + row.created_by;
            this.previewVisible = true;
            let tangible = {};
            tangible = row;
            tangible.type = this.$route.query.type;
            this.$store.commit("ChangeUnStructure", tangible);
          },
        });
      } else {
        this.form.source_name = this.currentRowFile.filename;
        this.initTableData(this.currentRowFile);
      }
    },
    //选择数据源
    selectedSource () {
      this.initTableType('1');
    },
    //目标类型切换请求目标标签树
    selectType (val) {
      // console.log(val);
      //切换初始化
      this.initTableType(['1', '2', '3'])
      if (val == 2) {
        this.$store.dispatch("ajaxDb", {
          url: `/services/app-zonghe/api/dicLabelProperties?labelId.equals=1&paged=false`,
          method: "get",
          succeed: (res) => {
            this.AttrDoublelist = res;
          },
        });
      }
      this.getLabels();
    },
    //目标标签树选择
    selectedLabelName (data) {
      console.log(data);
      this.initTableType(['1', '2'])
      this.form.target_label_id = data.id;
      if (this.targetType == 1) {
        this.getModelAttr(data.id, 0);
      } else {
        //获取关系后两端点
        this.getModelRelation(data.id);
      }
    },
    //关系的属性选择
    selectedNode (id, index) {
      //抽取属性
      console.log(id, index);
      this.$store.dispatch("ajaxSimply", {
        url: "/services/app-zonghe/api/dicLabelProperties?paged=false&label_id.equals=" +
          id,
        method: "get",
        succeed: (res) => {
          console.log(res);
          this.conditionNode[index].list = res.data;
          this.Nodedirection[index][0].label_name = this.conditionNode[index].value;
        },
      });
    },
    //目标属性选择
    selectedAttr (value, index) {
    //   console.log(value, index);
    //   console.log(this.conditionNode[index].list);
      this.conditionNode[index].list.map(res => {
        if (res.name == value) {
          let arr = ['unknown', 'int', 'long', 'string', 'double', 'datetime', 'boolean']
          this.Nodedirection[index][0]['field_type_in_model'] = arr[Number(res.data_type)]
        }
      })

    },
    /* 事件触发 end */
    //再次请求列表
    againRequstlist (index) {
      this.paginations.pageIndex = index;
    },
    //点击导航
    selectedMenu (index) {
      // console.log(index);
      this.preview(this.webUrls[index], index);
    },
    submitUpload () {
      this.$refs.upload.submit();
    },
    uploadChange (file, filelist) {
      // console.log(file, filelist);
      this.fileList = filelist;
    },
    changeheader () {
      for (let i = 0; i < this.fileList.length; i++) {
        let pic = new FormData();
        pic.append("file", this.fileList[i].raw);
        // console.log(pic);
        this.$store.dispatch("ajax", {
          url: `/zonghe/api/upload_file/_file`,
          // url: `/zonghe/api/uploadfile/_file`,
          method: "post",
          data: pic,
          succeed: (res) => {
            console.log(res);
            if (res.result == "ok") {
              if (i == this.fileList.length - 1) {
                this.$message({
                  type: "success",
                  message: "添加成功!",
                });
                this.fileList = [];
                this.$refs.upload.clearFiles();
                this.jump();
              }
            }
          },
        });
      }
    },
    //标签页
    handleClick (tab) {
      console.log(tab);
      // console.log(this.activeName);
      // console.log(this.currentRowFile);
      if (tab.name == "second") {
        this.getLabels();
        // if (!this.xs) {
        //   setTimeout(() => {
        //     this.initXls();
        //   }, 200);
        // }
        this.form.source_name = this.currentRowFile.filename;
        this.initTableData(this.currentRowFile);
      }
    },
    //选择关系模型
    selectedModel (index) {
      console.log(this.relationModel[index]);
      this.Nodedirection = [];//初始化
      let obj = {
        field_name_in_table: "",
        field_name_in_model: "",
        label_name: "",
      };
      for (let i = 0; i < 2; i++) {
        let arr = [];
        arr[0] = JSON.parse(JSON.stringify(obj));
        this.Nodedirection.push(arr);
      }
      this.conditionNode[0].value = this.relationModel[index].start_node_label_name;
      this.conditionNode[1].value = this.relationModel[index].end_node_label_name;
      for (let i = 0; i < 2; i++) {
        if (i == 0) {
          this.selectedNode(this.relationModel[index].start_node_type, i)
        } else {
          this.selectedNode(this.relationModel[index].end_node_type, i)
        }

      }
    },
    //选择目标属性
    changePointlabel (index, val) {
      this.form.fields[index].targetFieldName = this.options[val].name;
      this.form.fields[index].targetFieldType = this.dataTypelist[this.options[val].data_type];
      let value = val.toString();
      if (value) {
        this.form.truefields[index] = this.form.fields[index];
      } else {
        delete this.form.truefields[index];
      }
    },
    //选择转换类型
    changeTransformType (index, val) {
      if (val) {
        this.getTransformFunction(val)
      }
    },
    //选择转换功能
    changeTransformFunction (index, val) {
      console.log(val);
      this.form.fields[index].dataNormalizationName = val;
      if (val) {
        this.form.truefields[index] = this.form.fields[index];
      }
    },
    //根据分类初始化
    initTableType (zindex) {
      console.log(zindex);
      //初始化字段信息
      if (this.activeName == 'second') {
        if (zindex.indexOf('1') > -1) {
          this.form.fields = []; //初始化字段信息-源字段
          this.temporaryVal = [];//初始化
          //第四等级初始化字段信息-源字段
          if (zindex.indexOf('4') > -1) {
            this.sources = []; //初始化 基本信息-数据源
            if (this.tableAllData.length > 0) {
              for (let i = 0; i < this.tableAllData.length; i++) {
                let souceAttr = {}; //数据源
                souceAttr.id = i;
                souceAttr.name = "表格_" + i;
                this.sources.push(souceAttr);
              }
              this.form.source_id = this.sources[0].id;
              //给源字段信息
            }
          }
          //第三等级初始化字段信息-源字段
          if (zindex.indexOf('3') > -1) {
            this.form.target_label_name = "";
          }
          console.log(this.targetType)
          console.log(this.tableAllData)
          console.log(this.form)
          console.log(this.sources)
          console.log(this.Nodedirection)
          if (this.targetType == 1) {
            let department = this.tableAllData[this.form.source_id];
            console.log(department)
            if (JSON.stringify(department) != '{}') {
              department.column_names.map((res) => {
                this.form.fields.push({
                  sourceFieldName: res,
                  targetFieldName: "",
                  targetFieldType: '',
                  dataNormalizationName: "直接赋值",
                });
                this.temporaryVal.push({
                  target_attr: '',
                  target_transformType: "",
                });
              });
            }
          } else {
            //目标为关系的时候字段信息的源字段数组
            this.sourceBity = this.tableAllData[this.form.source_id].column_names;
            this.Nodedirection = [];//源和目标数据清空
            //第二等级初始化基本信息--关系模型
            if (zindex.indexOf('2') > -1) {
              this.form.command = '';
            }

            let obj = {
              field_name_in_table: "",
              field_name_in_model: "",
              label_name: "",
            };
            for (let i = 0; i < 2; i++) {
              let arr = [];
              arr[0] = JSON.parse(JSON.stringify(obj));
              this.Nodedirection.push(arr);
            }//关系的字段信息内容初始化
            this.conditionNode = [{
              id: 0,
              title: "源节点",
              type: "start",
              value: "",
              index: "",
              list: [],
              labelName: "startNodeData",
            },
            {
              id: 1,
              title: "目标节点",
              type: "End",
              value: "",
              index: "",
              list: [],
              labelName: "endNodeData",
            },
            ];//源和目 头部初始化
          }

        }
      }
    },
    //开始导入
    OutSetInsert () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          // console.log(this.form.source_id);
          // console.log(this.tableAllData);
          // console.log(this.form.target_label_name);
          // console.log(this.form.target_label_id);
          // console.log(this.form.fields);
          // console.log(this.conditionNode);
          // console.log(this.Nodedirection);
          // console.log(this.form.truefields);
          if (this.timer) {
            clearInterval(this.timer);
          }
          var Attrlist = []
          for (var i in this.form.truefields) {
            Attrlist.push(this.form.truefields[i]); //属性
          }
          let obj = {};
          obj.name = "";
          obj.table_info = {};
          obj.table_info = this.tableAllData[this.form.source_id];
          obj.model_id = this.form.target_label_id;
          obj.model_label_name = this.form.target_label_name;
          obj.taskDataNormalizationConfig = {};
          obj.stepList = [];
          obj.stepList[0] = {};
          obj.stepList[0]["fields"] = Attrlist; //选中
          // obj.stepList[0]["fields"] = this.form.fields;//旧 全部

          let Url = "/zonghe/api/office/table/data_import";
          if (this.$route.query.type == "EXCEL") {
            Url = "/zonghe/api/office/excel/data_import";
            obj.filepath = this.currentRowFile.filepath_server
          }
          if (this.targetType == 1) {
            // obj.taskDataNormalizationConfig.stepList[0] = {};
            // obj.taskDataNormalizationConfig.stepList[0]["fields"] = this.form.fields;
            this.$store.dispatch("ajax", {
              url: Url,
              method: "post",
              data: obj,
              succeed: (res) => {
                // console.log(res);
                // this.prQueryTask(res);
                this.timer = setInterval(() => {
                  this.searchTaskState(res.id);
                }, 3000);
              },
            });
          } else {
            Url = "/zonghe/api/office/table/data_import_relationship";
            if (this.$route.query.type == "EXCEL") {
              Url = "/zonghe/api/office/excel/data_import_relationship";
            }
            obj.source_node_info = this.Nodedirection[0][0];
            obj.target_node_info = this.Nodedirection[1][0];
            // console.log(obj);
            this.$store.dispatch("ajax", {
              url: Url,
              method: "post",
              data: obj,
              succeed: (res) => {
                // console.log(res);
                // this.prQueryTask(res);
                this.timer = setInterval(() => {
                  this.searchTaskState(res.id);
                }, 3000);
              },
            });
          }
        }
      });
    },
    prQueryTask (res) {
      console.log(res);
      this.isResult = true;
      let obj = {};
      obj.importCount = res.importCount;
      obj.state = res.state;
      this.ResultJudge.forEach((it) => {
        if (it.id == res.state) {
          obj["color"] = it.color;
          obj["describe"] = it.describe;
          obj["en"] = it.en;
        }
      });
      if (
        obj.state == 1 ||
        obj.state == 0 ||
        obj.state == 2 ||
        obj.state == 3 ||
        obj.state == 5 ||
        obj.state == 6
      ) {
        this.isLongGo = true;
        this.searchTaskState(res.id);
      } else {
        this.isLongGo = false;
      }
      obj.nowDate = loadingTime();
      this.ImportTaskinfo = obj;
    },
    //查询任务状态--递归
    searchTaskState (id) {
      this.$store.dispatch("ajax", {
        url: `/zonghe/api/import_task/${id}`,
        method: "get",
        succeed: (res) => {
          console.log(res);
          if (res.state == 4) {
            clearInterval(this.timer);
            this.$message.success('导入成功!')
          } else if (res.state == -1) {
            clearInterval(this.timer);
            this.$message.error('状态异常!')
          }
          // this.prQueryTask(res);
        },
      });
    },
    /* 请求基本数据 start */
    //获取对应目标标签
    getLabels () {
      let URl = "/services/app-zonghe/api/dicLabel/tree?type.notEquals=5";
      if (this.targetType !== 1) {
        URl = "/services/app-zonghe/api/dicLabel/tree?type.equals=5";
      }
      this.$store.dispatch("ajaxService", {
        url: URl,
        method: "get",
        succeed: (res) => {
          console.log(res);
          this.labels = res;
        },
      });
      this.getTransformType()
    },
    //获取 目标属性
    getModelAttr (id) {
      // console.log(id);
      this.$store.dispatch("ajaxSimply", {
        url: "/services/app-zonghe/api/dicLabelProperties?paged=false&label_id.equals=" +
          id,
        method: "get",
        succeed: (res) => {
          console.log(res)
          this.options = res.data;
        },
      });
    },
    //获取转换类型
    getTransformType () {
      this.$store.dispatch("ajaxSimply", {
        url: "/zonghe/api/data_normalization_function/types",
        method: "get",
        succeed: (res) => {
          //   console.log(res);
          this.transformTypelist = res.data;
        },
      });
    },
    //根据转换类型获取 指定的转换功能
    getTransformFunction (val) {
      this.$store.dispatch("ajaxSimply", {
        url: `/zonghe/api/data_normalization_function?type_description.equals=${val}`,
        method: "get",
        succeed: (res) => {
          // console.log(res);
          this.transformFunctionlist = res.data;
        },
      });
    },
    //获取 目标关系
    getModelRelation (id) {
      let param = {
        node: {
          where: {
            bool_and: [],
          },
        },
        relationship: {
          where: {
            bool_and: [],
          },
        },
      };
      this.$store.dispatch("ajaxSimply", {
        url: `/services/app-zonghe/api/relationship/${id}/models?paged=false`,
        method: "get",
        data: param,
        succeed: (res) => {
          console.log(res.data);
          this.relationModel = res.data;
        },
      });
    },
    //获取表格数据
    initTableData (row) {
      this.isMainloading = true;
      let url = "/zonghe/api/office/file/tables/_get";
      if (this.$route.query.type == "EXCEL") {
        url = "/zonghe/api/office/excel/tables/_get";
      }
      this.$store.dispatch("ajax", {
        url: url,
        method: "post",
        data: {
          filepath: row.filepath_server,
        },
        succeed: (res) => {
          console.log(res);
          this.isMainloading = false;
          this.tableAllData = res;
          this.initTableType(['1', '2', '3', '4'])
        },
      });
    },
    /* 请求基本数据 end */
    // //初始化xls
    // initXls() {
    //   const rows = {};
    //   const styleRow = [
    //     {
    //       bgcolor: "#f4f5f8",
    //       textwrap: true,
    //       color: "#900b09",
    //       border: {
    //         top: ["thin", "#0366d6"],
    //         bottom: ["thin", "#0366d6"],
    //         right: ["thin", "#0366d6"],
    //         left: ["thin", "#0366d6"],
    //       },
    //     },
    //     {
    //       bgcolor: "#f4f5f8",
    //       textwrap: false,
    //       color: "#900b09",
    //       border: {
    //         top: ["thin", "#0366d6"],
    //         bottom: ["thin", "#0366d6"],
    //         right: ["thin", "#0366d6"],
    //         left: ["thin", "#0366d6"],
    //       },
    //     },
    //     {
    //       bgcolor: "#f4f5f8",
    //       textwrap: false,
    //       color: "#900b09",
    //     },
    //     {
    //       bgcolor: "#f4f5f8",
    //       textwrap: true,
    //       color: "#900b09",
    //     },
    //     {
    //       border: {
    //         bottom: ["thin", "#000"],
    //         top: ["thin", "#000"],
    //         left: ["thin", "#000"],
    //         right: ["thin", "#000"],
    //       },
    //     },
    //     {
    //       bgcolor: "#f4f5f8",
    //       textwrap: true,
    //       color: "#900b09",
    //       border: {
    //         bottom: ["thin", "#000"],
    //         top: ["thin", "#000"],
    //         left: ["thin", "#000"],
    //         right: ["thin", "#000"],
    //       },
    //     },
    //   ];
    //   this.xs = new Spreadsheet("#x-spreadsheet-stuff", {
    //     showToolbar: true,
    //     showGrid: true,
    //   }).loadData([
    //     {
    //       styles: styleRow,
    //       merges: [],
    //       cols: {
    //         len: 10,
    //         2: { width: 100 },
    //       },
    //       name: "sheet-test1", //如果不命名用sheet+num
    //       rows,
    //     },
    //   ]);
    //   console.log(this.xs);
    // },
    uploadSuccess () {
      this.jump();
    },
  },
  mounted: function () {
    this.modification();
    this.init();
  },
  beforeDestroy () {
    clearInterval(this.timer);
  },
  watch: {
    $route () {
      this.modification();
      this.init();
      this.clearifyInit();
    },
  },
};
</script>
<style type="text/less" lang="less" scoped>
@import url("./index.less");
.txt_content {
  width: 100%;
  height: calc(100% - 60px);
  overflow: hidden;
  position: relative;
}
#x-spreadsheet-stuff {
  width: 100%;
  height: 100%;
}
.analyze_top_right {
  position: absolute;
  right: 60px;
  top: 0px;
  i {
    cursor: pointer;
  }
}
.upstars {
  width: 100%;
  height: 100%;
  .upstars_bottom {
    width: 100%;
    height: 90%;
    .bottom_content {
      width: 100%;
      height: 100%;
      display: flex;
      flex-flow: column nowrap;
      box-sizing: border-box;
      padding: 10px;
      .model_top {
        width: 100%;
        height: 30%;
        display: flex;
        flex-flow: row nowrap;
        p {
          width: 100%;
          height: 100%;
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-around;
          align-items: center;
        }
      }
      .model_content {
        width: 100%;
        height: 70%;
        display: flex;
        flex-flow: row nowrap;
        .content_block {
          width: 50%;
          height: 100%;
        }
        .content_block:nth-child(1) {
          border-right: 1px solid #000;
        }
      }
    }
  }
  .upstars_bottom_btn {
    width: 100%;
    height: 10%;
    display: flex;
    flex-flow: row nowrap;
    .upstars_bottom_state {
      width: calc(100% - 80px);
      height: 100%;
    }
  }
}
.downstars {
  position: absolute;
  bottom: 80px;
  right: 0px;
  z-index: 1200;
  .downstars_content {
    border-radius: 10px;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0px 0px 5px #ccc;
  }
}
.el-divider--horizontal {
  margin: 20px 0 15px 0;
}
.resultloading {
  display: inline-block;
  margin-left: 20px;
  width: 60px;
}
</style>